<template>
  <div class="page solution">
    <el-carousel
      :autoplay="false"
      height="100%"
      arrow="never"
      :loop="false"
      direction="vertical"
      class="carousel-h"
      ref="carousel"
      indicator-position="none"
      @change="carouselChange"
    >
      <el-carousel-item v-for="n in 8" :key="n" :class="'carousel' + (n - 1)">
        <div v-if="n==1" class="center">
          <div class="center-hack"></div>
          <div class="center-body carousel-item"></div>
        </div>
        <div v-else class="left">
          <div class="carousel-item"></div>
        </div>
        <div v-if="n==8">
          <div class="ask-btn" @click="showContactUs = true"></div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <carousel-arrow position="top" :text="arrowText('prev')" v-show="carouselPage > 0" @click.native="toggle('prev')"></carousel-arrow>
    <carousel-arrow position="bottom" :text="arrowText()" v-show="carouselPage < 7" @click.native="toggle('next')"></carousel-arrow>
    <increase-layer></increase-layer>

    <!-- 商务合作弹出框 -->
    <contact-us :show="showContactUs" @close="showContactUs = false"></contact-us>
  </div>
</template>

<script>
export default {
  name: 'Solution',
  data () {
    return {
      carouselPage: 0,
      showContactUs: false
    }
  },
  methods: {
    // 轮播翻页
    toggle (action) {
      this.$refs.carousel[action]()
    },
    // 轮播页改变事件
    carouselChange (curr) {
      this.carouselPage = curr
    },
    arrowText (arrow) {
      let i = 0
      if (arrow === 'prev') {
        i = this.carouselPage === 1 ? 3 : 1
      } else {
        i = this.carouselPage > 0 ? 2 : 0
      }
      return this.$t('home.vertical_arrow_text[' + i + ']')
    }
  }
}
</script>

<style lang="less">
.solution {
  each(range(0, 7), {
    .carousel@{value} {
      background: url('../assets/solution@{value}_bg.jpg') no-repeat;
      background-size: cover;

      .carousel-item {
        height: 60%;
        width: 650px;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url('../assets/solution@{value}_center.png');
      }

      .center {
        height: 100%;
        position: relative;
      }

      .left {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .carousel-item {
          margin-left:8%;
          height: 60%;
          width:580px;
        }
      }
    }
  });

  .ask-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15%;
  }
}
</style>
